<template>
    <div class="todo-item"
        v-bind:class="{active: item.active}"
        v-on:dblclick="$store.dispatch('editTodo', { index: index, todo: {active: $refs.actChk.checked}});">
        <input type="checkbox" ref="actChk"
            v-bind:checked="!item.active"
            v-on:change="$store.dispatch('editTodo', { index: index, todo: {active: !$refs.actChk.checked}});" />
        <div class="item-content"
            v-on:blur="todoFinishEdit($event, index)"
            v-on:keydown.enter="todoFinishEdit($event, index)">
            {{item.content}}
        </div>
        <input type="image" class="edit" src="assert/pen.svg"
            v-on:click="todoEdit($event)" />
        <input type="image" class="remove"  src="assert/close.svg"
            v-on:click="closeButtonClick($event, index)" />
    </div>
</template>

<script>
export default {
    name: 'TodoItem',
    props: [
        'item',
        'index'
    ],
    methods: {
        todoEdit: function (event) {
            let contentNode = event.target.parentNode.getElementsByClassName('item-content')[0];
            contentNode.setAttribute('contentEditable', true);
            event.target.setAttribute('disabled');
        },
        todoFinishEdit: function (event, index) {
            let contentNode = event.target.parentNode.getElementsByClassName('item-content')[0];
            contentNode.setAttribute('contenteditable', false);
            event.target.removeAttribute('disabled', false);
            this.$store.dispatch('editTodo', {
                index: index,
                todo: {content: contentNode.innerText}
            });
        },
        closeButtonClick: function (event, index) {
            this.$store.dispatch('removeTodo', index);
            this.$store.dispatch('addMessage', {
                msg: 'Delete Success!'
            });
        }
    }
}
</script>

<style lang="less">
.todo-item {
    position: relative;
    padding: 15px 15px 15px 15px;
    font-size: 24px;
    border-top: 1px solid #EEE;
    word-break: break-all;
    word-wrap: break-word;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    &:hover input[type=image] {
        opacity: 0.6;
    }

    .item-content {
        display: inline-block;
        padding: 0px 80px 0px 50px;
        width: 100%;
        box-sizing: border-box;
        color: rgba(50, 50, 50, 0.2);;
        transition: color 0.2s ease;
        text-decoration: line-through;
        text-decoration-color: rgba(50, 50, 50, 0.2);;

        &[contenteditable=true] {
            outline-color: rgba(175, 91, 94, 0.2);
            outline-width: 2px;
            outline-style: solid;
            cursor: text;
        }
    }

    input {
        position: absolute;
        top: 0px;
        bottom: 0px;
        margin: auto 0px;
    }

    &.active .item-content {
        color: black;
        text-decoration: none;
        text-decoration-color: black;
    }

    input[type=checkbox] {
        left: 25px;
    }

    input[type=image] {
        width: 18px;
        height: 18px;
        border: none;
        background-color: rgba(255, 255, 255, 0);
        font-size: inherit;
        transition: opacity 0.2s ease;
        opacity: 0;

        &:hover {
            opacity: 1;
        }

        &.edit {
            right: 50px;
        }

        &.remove {
            right: 15px;
        }
    }
}
</style>
